<!DOCTYPE html>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            align-items: center;
            justify-content: center;
            background: #000;
            min-height: 100vh;
        }

        h2 {
            font-size: 6em;
            color: #333;
            font-weight: 500;
        }

        h2 span {
            animation: animate 1.1s linear infinite;
        }

        h2 span:nth-child(1) {
            animation-delay: 0s;
        }

        h2 span:nth-child(2) {
            animation-delay: 0.2s;
        }

        h2 span:nth-child(3) {
            animation-delay: 0.4s;
        }

        h2 span:nth-child(4) {
            animation-delay: 0.6s;
        }
        
        h2 span:nth-child(5) {
            animation-delay: 0.7s;
        }

        h2 span:nth-child(6) {
            animation-delay: 0.8s;
        }
        
        h2 span:nth-child(7) {
            animation-delay: 0.9s;
        }
        
        h2 span:nth-child(8) {
            animation-delay: 1.0s;
        }

        h2 span:nth-child(9) {
            animation-delay: 1.1s;
        }

        .box {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #0c1b21;
        }

        .loader {
            position: relative;
            height: 250px;
            background: #666;
            animation: animate 12s linear infinite;
        }

        .loader span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .loader span::before {
            content: "";
            position: absolute;
            top: 0;
            width: 40px;
            height: 40px;
            background: linear-gradient(45deg, #c7eeff, #03a9f4);
            border-radius: 50%;
            box-shadow: 0 0 30px #00bcd4;
        }

        .loader span {
            transform: rotate(calc(45deg * var(--i)));
        }

        .loader span::before {
            left: calc(50% - 20px);
        }

        .rotate {
            animation: animate 4s ease-in-out infinite;
            animation-delay: calc(-0.2s * var(--j));
        }

        .loader {
            filter: url(#fluid);
            background: transparent;
        }

        @keyframes animate {
            0% {
                transform: rotate(0deg);
            }

            0%, 80% {
                color: #333;
                box-shadow: none;
            }

            100% {
                transform: rotate(360deg);
                color: #fff;
                text-shadow: 0 0 10px #fff,
                    0 0 20px #fff,
                    0 0 40px #fff,
                    0 0 80px #fff,
                    0 0 160px #fff,
                    0 0 320px #fff;
            }
        }

        svg {
            width: 0;
            height: 0;
        }

        .word {
            position: absolute;
            color: #fff;
            font-size: 1.2em;
            animation: words 3s linear infinite;
        }

        @keyframes words {
            0% {
                transform: scale(1.1);
            }

            25% {
                transform: scale(1);
            }

            50% {
                transform: scale(0.9);
            }

            75% {
                transform: scale(1);
            }

            100% {
                transform: scale(1.1);
            }
        }

        .container {
            text-align: center;
            background-color: transparent;
            filter: contrast(30);
        }

        .text {
            font-size: 100px;
            letter-spacing: -50px;
            color: #fff;
            animation: showup 5s linear forwards;
        }

        @keyframes showup {
            0% {
                filter: blur(10px);
            }

            100% {
                letter-spacing: 0.1em;
                filter: blur(2px);
            }
        }

        .version {
            font-size: 0.7em;
        }

    </style>
</head>

<body>
    <div class="box">

        <svg>
            
            <filter id="fluid">
                
                <feGaussianBlur in="SourceGraphic" stdDeviation="10"></feGaussianBlur>
                
                <feColorMatrix values="
                            1 0 0 0 0
                            0 1 0 0 0
                            0 0 1 0 0
                            0 0 0 20 -10 ">
                </feColorMatrix>
            </filter>
        </svg>
        <div class="loader">
            
            <span style="--i:1"></span>
            <span style="--i:2"></span>
            <span style="--i:3"></span>
            <span style="--i:4"></span>
            <span style="--i:5"></span>
            <span style="--i:6"></span>
            <span style="--i:7"></span>
            <span style="--i:8"></span>
            
            <span class="rotate" style="--j:0"></span>
            <span class="rotate" style="--j:1"></span>
            <span class="rotate" style="--j:2"></span>
            <span class="rotate" style="--j:3"></span>
            <span class="rotate" style="--j:4"></span>
        </div>
        <div class="word container">
            <h2 class="text">
                <span>M</span>
                <span>A</span>
                <span>P</span>
                <span>Y</span>
                <br>
                <span class="version">0</span>
                <span class="version">.</span>
                <span class="version">1</span>
                <span class="version">.</span>
                <span class="version">0</span>
            </h2>
        </div>
    </div>
</body>
</html>
